import React from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import {getData} from '../api/login'
import { useAppContext } from '../context/Appcontext';
import taobao from "../image/淘宝网.png"

const Login = (props) => {
    const {state,dispatch} = useAppContext();
    const onFinish = ()=>{
        getData(state.username,state.pwd)
            .then(res=>{
                if(res.data.data.token){
                    props.history.replace('/')  
                    message.success('登陆成功',0.5)
                }else{
                    message.error('用户名或密码不对！',0.5)
                }   
            })
    }
    return (
        <div>
            <div className='login-header'>
                <img src={taobao}/>
            </div>
            <div className='login'>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Username!',
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} 
                            placeholder="Username"
                            onChange={e=>dispatch({type:'username',username:e.target.value})}
                        />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Password!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                            onChange={e=>dispatch({type:'pwd',pwd:e.target.value})}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>记录密码</Checkbox>
                        </Form.Item>

                        <a className="login-form-forgot" href="">
                            忘记密码
                        </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Login